<script setup lang='ts'>

const props = defineProps({
    bookinfo: {
        type: Object,
    }
})

</script>

<template>
    <div class="book" v-if="props.bookinfo">
        <div class="book-img">
            <img v-lazy="props.bookinfo[0]?.cover || props.bookinfo.cover" alt="">
        </div>
        <div class="book-msg">
            <h3>{{ props.bookinfo[0]?.title || props.bookinfo.title }}</h3>
            <span>{{ props.bookinfo[0]?.author || props.bookinfo.author }}/{{
                props.bookinfo[0]?.category ||
                    props.bookinfo.category
            }}</span>
            <p>{{
                props.bookinfo[0]?.recomContent || props.bookinfo[0]?.content || props.bookinfo.content
                    || props.bookinfo.summary
            }}</p>
        </div>
    </div>
</template>

<style lang="less" scoped>
.book {
    width: 100%;
    height: 120rem;
    display: flex;
    justify-content: left;
    align-items: center;
    margin-bottom: 20rem;

    .book-img {
        margin-right: 10rem;
        font-size: 0;

        img {
            width: 90rem;
            box-shadow: 1rem 1rem 4rem 3rem #eee;
        }
    }

    .book-msg {
        height: 120rem;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        h3 {
            color: #000;
            font-weight: bold;
            font-size: 17rem;

            display: -webkit-box;
            -webkit-box-orient: vertical; //从上到下垂直排列子元素(设置伸缩盒子的子元素的排列方式)
            text-overflow: ellipsis; //溢出用省略号显示
            overflow: hidden; //超出的文本隐藏
            -webkit-line-clamp: 1; //表明
        }

        span {
            font-size: 12rem;
            color: #666;

            display: -webkit-box;
            -webkit-box-orient: vertical; //从上到下垂直排列子元素(设置伸缩盒子的子元素的排列方式)
            text-overflow: ellipsis; //溢出用省略号显示
            overflow: hidden; //超出的文本隐藏
            -webkit-line-clamp: 1; //表明
        }

        p {
            width: 100%;
            font-size: 12rem;
            color: #666;

            display: -webkit-box;
            -webkit-box-orient: vertical; //从上到下垂直排列子元素(设置伸缩盒子的子元素的排列方式)
            text-overflow: ellipsis; //溢出用省略号显示
            overflow: hidden; //超出的文本隐藏
            -webkit-line-clamp: 2; //表明3行文本显示省略号,这里要根据自身需求进行设置

        }
    }
}
</style>
